<template>
  <view class="course-detail">
    <!-- 课程头部 -->
    <view class="course-header">
      <image src="/static/course/detail-bg.jpg" mode="aspectFill" class="header-bg"></image>
      <uni-icons type="arrowleft" size="24" color="#fff" class="back-btn" @click="goBack"></uni-icons>
      <view class="header-content">
        <text class="course-title">教学视频【极致单根-真...</text>
        <text class="course-subtitle">CHRISTMAS DEER YUKI MANGA</text>
        <text class="course-type">极致单根款 真我系列</text>
      </view>
    </view>

    <!-- 视频播放区 -->
    <view class="video-container">
      <image src="/static/course/detail-thumb.jpg" mode="aspectFill" class="video-thumb"></image>
      <view class="play-overlay">
        <view class="play-btn">
          <uni-icons type="play" size="60" color="rgba(255,255,255,0.8)"></uni-icons>
        </view>
        <text class="play-text">领取后播放视频</text>
      </view>
    </view>

    <!-- 课程简介 -->
    <view class="course-intro">
      <view class="section-header">
        <text class="intro-title">究極の一本型</text>
        <text class="intro-sub">教学视频【极致单根-真我系列】</text>
      </view>

      <view class="course-meta">
        <view class="meta-item">
          <uni-icons type="time" size="22" color="#999"></uni-icons>
          <text>永久有效</text>
        </view>

        <view class="meta-item">
          <uni-icons type="person" size="22" color="#999"></uni-icons>
          <text>{{ students }}人已学</text>
        </view>

        <view class="free-tag">免费</view>
      </view>
    </view>

    <!-- 课程详情 -->
    <view class="detail-section">
      <view class="section-title">
        <text>课程详情</text>
      </view>

      <view class="detail-content">
        <text class="detail-title">图文笔记重点拆解</text>
        <text class="detail-text">本课程详细讲解极致单根款美睫技术的每一个步骤，包括材料准备、接睫技巧、固定方法以及后续维护保养。课程分为8个章节，时长共计2小时15分钟。</text>

        <view class="detail-points">
          <text class="point-title">课程重点：</text>
          <text class="point">· 真我系列睫毛特点与选择技巧</text>
          <text class="point">· 日式单根嫁接的核心技术</text>
          <text class="point">· 眼型分析与睫毛设计</text>
          <text class="point">· 解决常见问题的方法</text>
          <text class="point">· 客户咨询与沟通技巧</text>
        </view>
      </view>
    </view>

    <!-- 课程评价 -->
    <view class="review-section">
      <view class="section-title">
        <text>课程评价</text>
        <text class="review-count">({{ reviews.length }}条评价)</text>
      </view>

      <view class="empty-reviews" v-if="reviews.length === 0">
        <uni-icons type="compose" size="44" color="#ccc"></uni-icons>
        <text class="empty-text">暂无评价</text>
      </view>

      <view class="review-action">
        <button class="review-btn" open-type="share">分享此课程</button>
        <button class="review-btn" @click="writeReview">写评价</button>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="detail-footer">
      <view class="footer-icons">
        <view class="footer-icon">
          <uni-icons type="headphones" size="28" color="#666"></uni-icons>
          <text>客服</text>
        </view>

        <view class="footer-icon">
          <uni-icons type="shop" size="28" color="#666"></uni-icons>
          <text>店铺</text>
        </view>

        <view class="footer-icon">
          <uni-icons type="cart" size="28" color="#666"></uni-icons>
          <text>购物车</text>
          <uni-badge :text="cartCount" size="small" absolute="rightTop"></uni-badge>
        </view>
      </view>

      <button class="get-course-btn">免费领取</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const students = ref(177);
const reviews = ref([]);
const cartCount = ref(2);

const goBack = () => {
  uni.navigateBack();
};

const writeReview = () => {
  uni.showToast({
    title: '评价功能开发中',
    icon: 'none'
  });
};
</script>

<style lang="scss" scoped>
.course-detail {
  position: relative;
  background-color: #fff;
  padding-bottom: 120rpx;
}

.course-header {
  position: relative;
  height: 240rpx;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .back-btn {
    position: absolute;
    top: 60rpx;
    left: 30rpx;
    z-index: 2;
  }

  .header-content {
    position: absolute;
    bottom: 40rpx;
    left: 30rpx;
    right: 30rpx;
    color: white;
    z-index: 2;

    .course-title {
      font-size: 36rpx;
      font-weight: 600;
      display: block;
      margin-bottom: 10rpx;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
    }

    .course-subtitle {
      font-size: 28rpx;
      display: block;
      margin-bottom: 6rpx;
      opacity: 0.9;
    }

    .course-type {
      font-size: 26rpx;
      opacity: 0.8;
    }
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80rpx;
    background: linear-gradient(transparent, rgba(0,0,0,0.1));
    z-index: 1;
  }
}

.video-container {
  position: relative;
  height: 400rpx;
  margin: 0 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  transform: translateY(-30rpx);
  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.15);

  .video-thumb {
    width: 100%;
    height: 100%;
  }

  .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .play-btn {
      width: 100rpx;
      height: 100rpx;
      background-color: rgba(229, 77, 66, 0.7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
    }

    .play-text {
      color: rgba(255,255,255,0.9);
      font-size: 28rpx;
      font-weight: 500;
    }
  }
}

.course-intro {
  padding: 0 30rpx;
  margin: 30rpx 0;

  .section-header {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .intro-title {
      font-size: 36rpx;
      font-weight: 600;
      display: block;
      margin-bottom: 10rpx;
    }

    .intro-sub {
      font-size: 28rpx;
      color: #666;
    }
  }

  .course-meta {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    gap: 30rpx;

    .meta-item {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666;
      gap: 8rpx;
    }

    .free-tag {
      background-color: #fff4f3;
      color: #e54d42;
      padding: 6rpx 24rpx;
      border-radius: 30rpx;
      font-size: 26rpx;
      margin-left: auto;
    }
  }
}

.detail-section, .review-section {
  margin: 0 30rpx 40rpx;
  padding-top: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
    color: #333;
    position: relative;
    padding-left: 25rpx;
    display: flex;
    justify-content: space-between;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 36rpx;
      background-color: #e54d42;
      border-radius: 4rpx;
    }

    .review-count {
      font-size: 26rpx;
      color: #999;
      font-weight: normal;
    }
  }

  .detail-content {
    .detail-title {
      font-size: 30rpx;
      font-weight: 600;
      display: block;
      margin-bottom: 20rpx;
    }

    .detail-text {
      font-size: 28rpx;
      color: #555;
      line-height: 1.6;
      margin-bottom: 20rpx;
      display: block;
    }

    .detail-points {
      background-color: #f9f9f9;
      border-radius: 16rpx;
      padding: 20rpx;

      .point-title {
        font-size: 28rpx;
        font-weight: 600;
        display: block;
        margin-bottom: 12rpx;
      }

      .point {
        display: block;
        font-size: 26rpx;
        color: #666;
        margin: 8rpx 0;
      }
    }
  }
}

.empty-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;

  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

.review-action {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .review-btn {
    background-color: #f9f9f9;
    border: 1rpx solid #eee;
    color: #666;
    font-size: 28rpx;
    border-radius: 10rpx;
    padding: 20rpx;
  }
}

.detail-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);

  .footer-icons {
    display: flex;

    .footer-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40rpx;
      font-size: 22rpx;
      color: #666;
      position: relative;
      padding: 0 10rpx;
    }
  }

  .get-course-btn {
    background: linear-gradient(90deg, #e54d42, #ff6b6b);
    color: white;
    border-radius: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    padding: 0 60rpx;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(229, 77, 66, 0.3);
  }
}
</style>